import React from 'react';
import { Input, Button, List } from 'antd';

const TodoListUI = (props) => {
  return (<div style={{ marginTop: '10px', marginLeft: '10px' }}>
    <div>
      <Input
        value={props.inputValue}
        placeholder="Basic usage"
        style={{ width: '300px' }}
        onChange={props.InputChange}
      />
      <Button type="primary" onClick={props.BtnClick}>Primary</Button>
    </div>

    <List
      style={{ width: '300px', marginTop: '10px' }}
      bordered
      dataSource={props.list}
      renderItem={(item, index) => (
        // 此处存在BUG 获取不到索引值
        <List.Item onClick={() => { props.DeleteItem(index) }}>
          {item}-{index}
        </List.Item>
      )}
    />
  </div>)
}

export default TodoListUI